<script setup lang="ts">

import { AddAreaAPI, AreaList, dropListAPI } from '@/api/car';
import type { areaRow, CarRuleParams, dropList, EmptyObject } from '@/types/car';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { onMounted, ref } from 'vue';

const areaParams=ref<CarRuleParams>({
  page:1,
  pageSize:5
})
const total=ref(0)
const areaList=ref<areaRow[]>([])
const dropData=ref<dropList[]>([])
const getareaList=async ()=>{
const res=await AreaList(areaParams.value)
console.log('res',res);
areaList.value=res.data.rows as areaRow[]
total.value=res.data.total as number
const rul = await dropListAPI()
dropData.value=rul.data as dropList[]
}
onMounted(()=>{
  getareaList()
})
const dialogVisible=ref(false)
const formData=ref<EmptyObject>({
  areaName:'',
  spaceNumber:null,
  areaProportion:null,
  ruleId:null,
  remark:''
})
const RentRules=ref<FormRules<EmptyObject>>({
  areaName:{
    required:true,
    message:'请输入区域名称',
    trigger:'blur'
  },
  spaceNumber:{
    required:true,
    message:'请输入车位数',
    trigger:'blur'
  },
  areaProportion:{
    required:true,
    message:'请输入面积',
    trigger:'blur'
  },
  ruleId:{
    required:true,
   message:'请选择关联计费规则',
  }
})
const addRentRef=ref<FormInstance>()
const handleArea=async ()=>{
 await addRentRef.value?.validate()
 await AddAreaAPI(formData.value)
 ElMessage.success('添加成功')
 dialogVisible.value=false
 getareaList()
}
const edit=(id:number)=>{
  dialogVisible.value=true
}
</script>

<template>
  <div class="car-area-page" style="padding: 20px;">
    <el-button type="primary" style="margin-bottom:20px ;" @click="dialogVisible=true">添加区域</el-button>
    <el-table :data="areaList">
      <!-- 序号	区域名称	车位数（个）	面积（㎡）	计费规则	备注	操作 -->
      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column label="区域名称" prop="areaName"></el-table-column>
      <el-table-column label="车位数（个）" prop="spaceNumber"></el-table-column>
      <el-table-column label="面积（㎡）" prop="areaProportion"></el-table-column>
      <el-table-column label="计费规则" prop="hoverRuleName"></el-table-column>
      <el-table-column label="备注" prop="remark"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="primary" text @click="edit(row.id)">编辑</el-button>
          <el-button type="primary" text >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      :page-sizes="[2, 3, 4, 5]"
      layout="total,sizes, prev, pager, next,jumper"
      v-model:current-page="areaParams.page"
      v-model:page-size="areaParams.pageSize"
      @change="getareaList"
    />

  </div>
  <el-dialog  title="添加区域" width="600"  v-model="dialogVisible">
    <el-form label-position="top" style="width: 300px;margin-left: 70px;" :model="formData" :rules="RentRules" ref="addRentRef">
      <el-form-item label="区域名称" prop="areaName" >
        <el-input placeholder="请输入区域名称" v-model="formData.areaName"/>
      </el-form-item>
      <el-form-item label="车位数" prop="spaceNumber" >
        <el-input placeholder="请输入车位数" v-model="formData.spaceNumber"/>
      </el-form-item>
      <el-form-item label="面积" prop="areaProportion">
        <el-input placeholder="请输入面积" v-model="formData.areaProportion"/>
      </el-form-item>
      <el-form-item label="关联计费规则" prop="ruleId">
        <el-select v-model="formData.ruleId as number">
          <el-option v-for="item in dropData" :key="item.areaId" :label="item.areaName" :value="item.areaId" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark" >
        <el-input placeholder="请输入备注" v-model="formData.remark" type="textarea"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer" >
        <el-button >取消</el-button>
        <el-button type="primary" @click="handleArea">添加</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
